import React from 'react';
import { StyleSheet } from 'react-native';
import { createMaterialTopTabNavigator, MaterialTopTabBarProps } from '@react-navigation/material-top-tabs';
import Home from '@/pages/Home/Home';
import TopTabBarWrapper from '@/pages/views/TopTabBarWrapper';
import { connect, ConnectedProps } from 'react-redux';
import { RootState } from '@/models/index';
import { ICategory } from '@/models/category';

export type HomeParamList = {
    [key: string]: {
        namespace: string;
    };
};

const mapStateToProps = ({ category }: RootState) => {
    return {
        myCategorys: category.myCategorys,
    };
};

const connector = connect(mapStateToProps);

type ModelState = ConnectedProps<typeof connector>;
interface IProps extends ModelState { }

const Tab = createMaterialTopTabNavigator()

const renderTabBar = (props: MaterialTopTabBarProps) => {
    return <TopTabBarWrapper {...props} />;
};

function HomeTabs(props: IProps) {
    const { myCategorys } = props;
    const renderScreen = (item: ICategory) => {
        // createHomeModel(item.id);
        return (
            <Tab.Screen
                key={item.id}
                name={item.id}
                component={Home}
                options={{ tabBarLabel: item.name }}
                initialParams={{
                    namespace: item.id,
                }}
            />
        );
    };
    return <Tab.Navigator
        lazy
        tabBar={renderTabBar}
        sceneContainerStyle={styles.sceneContainer}
        tabBarOptions={
            {
                scrollEnabled: true,
                tabStyle: {
                    width: 80
                },
                indicatorStyle: {
                    width: 20,
                    height: 4,
                    marginLeft: 30,
                    borderRadius: 2,
                    backgroundColor: '#f86442'
                },
                activeTintColor: '#f86442',
                inactiveTintColor: '#333'
            }
        }
    >
        {myCategorys.map(renderScreen)}
    </Tab.Navigator>
}

const styles = StyleSheet.create({
    sceneContainer: {
        backgroundColor: 'transparent',
    },
});

export default connector(HomeTabs)